---
title: "Install Tailwind CSS with Vue 3 and Vite"
description: "Setting up Tailwind CSS in a Vue 3 and Vite project."
tool: Vue 3 and Vite
---

```preval installation
tool: Vite
script: npm init vite
npmInstall: true
```

---

```preval setup
version: latest
```

```preval configuration
purge:
  - ./index.html
  - ./src/**/*.{vue,js,ts,jsx,tsx}
```

```preval include
tool: Vite
file: ./src/index.css
create: true
```

Finally, ensure your CSS file is being imported in your `./src/main.js` file:

```js
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
```

---

```preval finish
scripts:
  - npm run dev
```

